<template>
  <el-cascader
    ref="contentRef"
    v-bind="$attrs"
    :filterable="filterable"
    :clearable="clearable"
    :options="options"
    :props="cascaderProps"
    :show-all-levels="false"
    :debounce="500"
    :filter-method="filterMethod"
    @change="change"
    :class="{ 'cascader-wrapper-style': isSelfStyle }"
  />
</template>
<script setup>
import * as api from "@/api/public";
import { config } from "./config.js";
const emit = defineEmits(["change"]);
const props = defineProps({
  type: { type: String, default: "0" },
  multiple: { type: Boolean, default: true },
  filterable: { type: Boolean, default: true },
  clearable: { type: Boolean, default: true },
  isSelfStyle: { type: Boolean, default: true },
});
const { type } = toRefs(props);
const item = config[type.value];
const { key } = item;
const options = ref([]);

const getData = () => {
  try {
    api[key]().then((data) => {
      options.value = data;
    });
  } catch (error) {
    console.log("error", error);
  }
};
getData();
const cascaderProps = computed(() => ({
  emitPath: false,
  multiple: props.multiple,
  label: "name",
  value: item.id || "id",
  children: item.children || "sub",
}));
const filterMethod = (node, val) => {
  if (
    !!~node.text.indexOf(val) ||
    !!~node.text.toUpperCase().indexOf(val.toUpperCase())
  ) {
    return true;
  }
};
const contentRef = ref();
const change = (value) => {
  const getCheckedNodes = contentRef?.value.getCheckedNodes();
  const labels = getCheckedNodes.map((d) => d.label);
  emit("change", { value, labels });
};
</script>
<style lang="scss" scoped>

</style>
